<template>
  <div class="line-chart-container" ref="chartContainer" style="height: 100%">
    <h1 class="chart-title">实时功率曲线</h1>
    <div class="button-container">
      <button @click="switchToMonthly" class="transparent-button">月度</button>
      <button @click="switchToYearly">年度</button>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
      isMonthly: true, // Initially show monthly data
    };
  },
  mounted() {
    // Initialize the chart
    this.chart = echarts.init(this.$refs.chart);

    // Listen for window resize events and redraw the chart
    window.addEventListener('resize', this.resizeChart);

    // Render the chart based on initial data
    this.renderChart();
  },
  methods: {
    renderChart() {
      // Chart configuration options
      const options = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.isMonthly ?
            ['01','03','05','07','09','11','13','15','17','19','21','23','25','27','29'] :
            ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // Use Chinese month names
          axisLabel: {
            color: 'white', // x-axis label color
          },
        },
        yAxis: {
          max: this.isMonthly ? 20000 : 240000, // Set max value based on monthly/yearly data
          type: 'value',
          axisLabel: {
            color: 'white', // y-axis label color
          },
        },
        series: [
          {
            name: 'Power',
            type: 'bar', // Changed to bar chart
            data: this.isMonthly ?
              [10000, 9990, 540, 200, 1080, 1350, 1620, 15999, 500, 10000, 9990, 540, 200, 1080, 1350, 1620, 1090, 500, 100] :
              [120000, 140000, 160000, 180000, 200000, 220000, 200000, 180000, 160000, 140000, 120000], // Data for the bar chart
            itemStyle: {
              color: 'rgba(38, 203, 124,0.8)', // Bar color and transparency
            },
          },
        ],
      };

      // Render the chart using the configuration options
      this.chart.setOption(options);

      // Resize the chart to fit the container
      this.resizeChart();
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    switchToMonthly() {
      if (!this.isMonthly) {
        this.isMonthly = true;
        this.renderChart();
      }
    },
    switchToYearly() {
      if (this.isMonthly) {
        this.isMonthly = false;
        this.renderChart();
      }
    },
  },
  beforeDestroy() {
    // Remove window resize event listener
    window.removeEventListener('resize', this.resizeChart);

    // Dispose of the chart instance and release resources
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
.line-chart-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(10, 21, 44);
  height: 500px;
}
.chart-title {
  font-size: 24px;
}
.button-container {
  margin-top: 20px;
  text-align: right; /* Right-align the buttons */
}
.button-container button {
  margin-left: 10px; /* Add margin between buttons */
  padding: 5px 10px;
  background-color: #2ba4ad;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.transparent-button {
  background-color: transparent;
  color: white; /* Adjust text color if needed */
  border: 1px solid rgb(39, 207, 126); /* Set border color */
  cursor: pointer; /* Add cursor pointer */
}
</style>
